<template ref="login">
  <div>
    <div class="Login" v-if="!loginFlag">
      <el-form ref="form" :model="form" label-width="80px" class="Form">
        <el-form-item label="账号">
          <el-input v-model="form.account"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <!-- <el-input v-model="form.password"></el-input> -->
          <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          style="position: relative; left: 250px"
          >登陆</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      loginFlag: false,
    };
  },
  methods: {
    onSubmit() {
      var url = "http://localhost:3000"; //后端服务端口

      // 获取后端返回的数据
      this.$axios
        .get(url + "/login")
        .then((response) => {
          console.log(
            response.data.sqlresult[0].UID,
            response.data.sqlresult[0].password
          );
          for (let i = 0; i < response.data.sqlresult.length; i++) {
            if (response.data.sqlresult[i].UID == this.form.account) {
              if (response.data.sqlresult[i].password == this.form.password) {
                alert("登陆成功");
                this.$router.push({ path: "/search" });
                this.loginFlag = true;
              } else {
                alert("账号或密码错误请重新输入");
              }
            } else {
              if(i==response.data.sqlresult.length-1)
              {
                alert("账号或密码错误请重新输入");
              }
              
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  created() {},
};
</script>

<style scoped>
.Login {
  width: 100%;
  height: 100%;
}
.Form {
  width: 500px;
  height: auto;
  position: absolute;
  top: 40%;
  left: 30%;
}
</style>